<script setup>
import {ref} from "vue";
import {useComputerStore} from "@/stores/useComputer.js";
import {closeComputer} from "@/api/computer.js";
import {ElMessage} from "element-plus";
import router from "@/router.js";

const computerStore = useComputerStore()
const titleInfo = ref(
    computerStore.detail == ''?"当前状态 已下机":"当前使用电脑："+computerStore.detail
)

const closeComputerHandle = async ()=>{
  let result = await closeComputer(computerStore.detail)

  if (result.code == 200) {
    computerStore.setUserComputerCost(result.date)
    // closeTimer()
    //清空电脑信息的值，防止下机后再次查询仍然扣钱
    // clickComputerDetail.value = ''
    computerStore.removeClickComputerDetail()
    //下机时再次查询可用余额 重新渲染
    // searchUsableInfo()
    ElMessage.success("下机成功，消费 " + computerStore.userComputerCost +" 元")
    await computerStore.setIsClose(true)
    await computerStore.removeInfo()
    await computerStore.removeDetail()
    titleInfo.value = '已下机'
    router.push('/board/openComputer')
  }else {
    ElMessage.error("已下机，无需再次操作")
  }
}
</script>

<template>
<!--  下机页面-->
<!--  {{computerStore.detail == ''?"当前状态 已下机":"当前使用电脑："+computerStore.detail}}-->
<!--  <el-button @click="closeComputerHandle">下机</el-button>-->

  <el-result :title="titleInfo" sub-title="请选择是否下机">
    <template #icon>
      <el-image
          src="https://lkpstudy.oss-cn-beijing.aliyuncs.com/%E7%94%B5%E8%84%91%E5%9B%BE%E7%89%87.png"
          class="closeImg"
      />
    </template>
    <template #extra>
      <el-button @click="closeComputerHandle">下机</el-button>
    </template>
  </el-result>
</template>

<style scoped>
.closeImg {
  width: 500px;
}
.el-result {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
</style>